import * as THREE from 'three'
import { FontLoader } from "three/examples/jsm/loaders/FontLoader"
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry"
interface fontConfig {
    text: string
    size: number
    position: THREE.Vector3
    color: THREE.ColorRepresentation
    rotation: number
}
export class Font {
    scene
    font: any
    fontConfig: fontConfig[]
    constructor(scene: THREE.Scene,) {
        this.scene = scene;
        this.fontConfig = [
            {
                text: '黄扬欢',
                position: new THREE.Vector3(-27, 130, 395),
                size: 15,
                rotation: Math.PI * 3 / 4,
                color: "#ffff00"
            },
            {
                text: '叶金云',
                size: 15,
                position: new THREE.Vector3(180, 110, -70),
                rotation: Math.PI / 2,
                color: '#ffffff'
            },
        ]
        this.initLoader()
    }
    initLoader() {
        const loader = new FontLoader()
        loader.load("/font.json", font => {
            this.font = font
            this.fontConfig.map(v => {
                this.createFont(v)
            })
        })
    }

    createFont(font: fontConfig) {
        const geometry = new TextGeometry(font.text, {
            font: this.font,
            size: font.size,
            height: 2,
            // curveSegments: 12,
            // bevelEnabled: true,
            // bevelThickness: 10,
            // bevelSize: 8,
            // bevelSegments: 5
        });

        const material = new THREE.ShaderMaterial({
            uniforms: {
                u_color: {
                    value: new THREE.Color(font.color)
                }
            },
            vertexShader: `
                void main() {
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `,
            fragmentShader: `
                uniform vec3 u_color;
                void main() {
                gl_FragColor = vec4(u_color, 1.0);
                }
            `,
            transparent: true,
        })

        const text = new THREE.Mesh(geometry, material)
        text.position.copy(font.position)
        text.rotation.y = font.rotation
        this.scene.add(text)
    }
}
